<template>
    <div id="app">
        <header class="header">
            <nav class="inner">
                <router-link to="/" exact>
                    <img class="logo" src="../../../assets/public/logo-48.png" alt="logo">
                </router-link>
                <router-link to="/new">新闻</router-link>
                <router-link to="/nlp">自然语言分析</router-link>
                <!--<router-link to="/show">Show</router-link>-->
                <!--<router-link to="/ask">Ask</router-link>-->
                <!--<router-link to="/job">Jobs</router-link>-->
                <span class="github">
                    <el-popover ref="popover5" placement="top" width="160" v-model="visible">
  　　　　　　　　　　　　　　<p>您确定要登出吗？</p>
  　　　　　　　　　　　　　　<div style="text-align: right; margin: 0">
    　　　　　　　　　　　　　<el-button size="mini" type="text" @click="visible = false">取消</el-button>
    　　　　　　　　　　　　　<el-button type="primary" size="mini" @click="logout">确定</el-button>
 　　　　　　　　　　　　　　 </div>
　　　　　　　　　　　　　</el-popover>
                    <router-link
                            :to="authenticated? '' : '/login'">{{ authenticated ? 'Hello,' + this.$store.state.user.user.data.email : '登录'}}
                            <el-button v-popover:popover5 type="text" style="color: white" v-show="authenticated">登出</el-button>
                    </router-link>
                </span>
            </nav>
        </header>
        <transition name="fade" mode="out-in">
            <router-view class="view"></router-view>
        </transition>
    </div>
</template>

<script>
    import Login from  '../user/Login.vue'
    export default {
        data(){
            return {
                input: '',
                select: '',
                visible: false,
            }
        },
        components: {Login},
        computed: {
            authenticated: function () {
                return this.$store.state.user.user.data ? true : false
            }
        },
        methods: {
            handSearch(){
                this.$store.dispatch('findPage', {key: this.input})
            },
            logout(){
                this.$store.dispatch('logout');
                this.visible = false
            }
        }
    }
</script>

<style lang="stylus">
    /*@import '../../../node_modules/element-ui/lib/theme-default/index.css';*/

    body
        font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
        font-size 15px
        background-color lighten(#eceef1, 30%)
        margin 0
        padding-top 55px
        color #34495e
        overflow-y scroll

    a
        color #34495e
        text-decoration none

    .header
        background-color #20a0ff
        position fixed
        z-index 999
        height 55px
        top 0
        left 0
        right 0
        .inner
            max-width 800px
            box-sizing border-box
            margin 0px auto
            padding 15px 5px
        a
            color rgba(255, 255, 255, .8)
            line-height 24px
            transition color .15s ease
            display inline-block
            vertical-align middle
            font-weight 300
            letter-spacing .075em
            margin-right 1.8em
            &:hover
                color #fff
            &.router-link-active
                color #fff
                font-weight 400
            &:nth-child(6)
                margin-right 0
        .github
            color #fff
            font-size .9em
            margin 0
            float right

    .logo
        width 24px
        margin-right 10px
        display inline-block
        vertical-align middle

    .view
        max-width 1200px
        margin 0 auto
        position relative

    .fade-enter-active, .fade-leave-active
        transition all .2s ease

    .fade-enter, .fade-leave-active
        opacity 0

    @media (max-width 860px)
        .header .inner
            padding 15px 30px

    @media (max-width 600px)
        body
            font-size 14px

        .header
            .inner
                padding 15px
            a
                margin-right 1em
            .github
                display none
</style>